import { store } from "@/store";
import { defineStore } from "pinia";
import router from "@/router";
import { RouteRecordRaw } from "vue-router";

interface MenuState {
    currentSideMenu: RouteRecordRaw[];
    currentSideChildMenu: RouteRecordRaw[];
    routerList: RouteRecordRaw[];
}

/**
 * @description 获取右侧菜单列表
 */
const useMenuStore = defineStore({
    id: 'side-menu',
    state: (): MenuState => ({
        currentSideMenu: [],
        currentSideChildMenu: [],
        routerList: [...router.options.routes]
    }),
    getters: {
        getSideList(state: MenuState): RouteRecordRaw[] {
            return state.currentSideMenu;
        },
        getchildList(state: MenuState): RouteRecordRaw[] {
            return state.currentSideChildMenu;
        }
    },
    actions: {
        setSideMenuList(path: string) {
            const sideShowMenu = this.routerList.find((item) => item.path === path)?.children || [];
            this.currentSideMenu = sideShowMenu;
            this.setChildMenuList(sideShowMenu[0].meta?.parent as string)
        },
        setChildMenuList(path: string) {
            console.log(path);
            
            const sideShowMenu = this.currentSideMenu.find((item) => item.path === path)?.children || [];
            this.currentSideChildMenu = sideShowMenu.filter(v => v.meta?.show)
        }
    }
});

export function useMenuStoreHook() {
    return useMenuStore(store);
}
